<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>浮动</title>
		<link  href="css/1.css" rel="stylesheet"/>
	</head>
	<body>
		<!-- 
		传统的网页布局：标准流+浮动+定位
		标准流：标签的显示规则（显示模式）
		浮动：让块级盒子在一行内显示
		定位：实现标签在网页中精准定位
		 <!-浮动float :
			1.浮动的盒子会脱离标准流(脱标)
		清除浮动的方法：
			1.额外标签法：隔墙法
			2.父级添加overflow：hidden属性
			3.添加after伪元素
			4.父级添加双伪元素
		 -->
		<div class="clearfix">
			<div class="box">1</div>
			<div class="box">2</div>
			<div class="box">3</div>
		</div>

		<div class="box1">4</div>
	</body>
</html>
